<template>
    <!--选中标签名 选中颜色 未选中颜色 固定在底部 路由模式 -->
    <van-tabbar v-model="choose" @change="changeTabbar" active-color="#F63515" inactive-color="#000" fiexd >
        <van-tabbar-item  icon="wap-home-o">首页</van-tabbar-item>
        <van-tabbar-item  icon="point-gift-o">分类</van-tabbar-item>
        <van-tabbar-item  icon="shopping-cart-o" :badge="this.$store.getters.getBadgeCount.allCount" v-if="this.$store.getters.getBadgeCount.allCount>0">购物车</van-tabbar-item>
        <van-tabbar-item  icon="shopping-cart-o" v-else>购物车</van-tabbar-item>
        <van-tabbar-item   icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
</template>
<script>
    export default {
        props:{
            active:{
                type:Number,
                default:0
            }
        },
        data(){
            return{
                // 索引
                choose:this.active,
            }
        },
        methods:{
            changeTabbar(index){              
                 switch(index){
                    case 0:        
                        this.$router.push('/home').catch(()=>{})
                        break
                    case 1:                       
                        this.$router.push('/category').catch(()=>{})
                        break
                    case 2:                     
                        this.$router.push('/shopcart').catch(()=>{})
                        break 
                    case 3:                     
                        this.$router.push('/user').catch(()=>{})
                        break   
                 }
            }
        },
    }
 </script>
    
    
